<template>
    <div class="agency-detail">
        <a-modal width="85%" :visible="visible" title="优惠券详情" @cancel="closeModal" class="yuan-modal reconciliation-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="detailLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <div class="form-title">基本信息</div>
                            <a-form-model-item class="yuan-form-item" label="优惠券名称">
                                <span class="yuan-form-input">{{editInfo.name}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="满减规则">
                                <span>最低消费{{$toYuan(editInfo.minAmount)}}元，优惠{{$toYuan(editInfo.discountAmount)}}元</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="发放方式">

                                <span> {{editInfo.issueTypeDesc}}</span>

                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="加盟机构营销比例">
                                <span> {{editInfo.storeCommissionRate}}%</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="发放总数">
                                <span> {{editInfo.issueQuantity}}</span>
                            </a-form-model-item>
                            <template v-if="couponType==='专属券'">
                                <a-form-model-item class="yuan-form-item" label="领取总数">
                                    <span> {{editInfo.receivedQuantity}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="核销总数">
                                    <span> {{editInfo.usedQuantity}}</span>
                                </a-form-model-item>
                            </template>
                            <template v-else>
                                <a-form-model-item class="yuan-form-item" label="领取总数(所有机构)">
                                    <span> {{editInfo.receivedQuantity}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="核销总数(所有机构)">
                                    <span> {{editInfo.usedQuantity}}</span>
                                </a-form-model-item>
                            </template>
                            <a-form-model-item class="yuan-form-item" label="活动状态">
                                <span :class="getStatusType(editInfo.status).class">
                                    {{getStatusType(editInfo.status).name}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="累计满减金额">
                                <span> {{$toYuan(editInfo.totalDiscountAmount || 0)}}</span>
                            </a-form-model-item>
                            <div>
                                <a-button type="primary" @click="jumpCoupon">其它信息</a-button>
                            </div>
                        </div>

                    </div>
                    <div class="form-panel yuan-form-col5" v-if="editInfo.storeDetails&&editInfo.storeDetails.length">
                        <div class="form-panel-box">
                            <div class="form-title">参与机构核销明细</div>
                            <a-table bordered :rowKey="(item,i)=>item.storeId" :columns="columnsAgency"
                                :data-source="editInfo.storeDetails" :pagination="false">
                                <template slot='action' slot-scope="text, record, index">
                                    <div>
                                        <a-button type="primary" @click="clickStoreList(record,index)">查看</a-button>
                                        <a-button type="success" @click="clickStoreExport(record)">导出</a-button>
                                    </div>
                                </template>
                            </a-table>
                        </div>

                    </div>
                    <div class="form-panel yuan-form-col5">
                        <div class="form-panel-box">
                            <div class="form-title">用户核销明细</div>
                            <div class="user-total" v-if="editInfo.issueTypeDesc==='用户主动领取'">
                                <div class="user-total-list">

                                    <div class="user-total-content c-primary">{{editInfo.totalIssued}}</div>
                                    <div class="user-total-title">发放数量</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content c-success">{{editInfo.totalReceived}}</div>
                                    <div class="user-total-title">已领取</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content ">{{editInfo.totalUnreceived}}</div>
                                    <div class="user-total-title">未领取</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content c-danger">{{editInfo.totalUsed}}</div>
                                    <div class="user-total-title">已使用</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content c-warning">{{editInfo.totalUnused}}</div>
                                    <div class="user-total-title">未使用</div>
                                </div>
                            </div>
                            <div class="user-total" v-else>
                                <div class="user-total-list">

                                    <div class="user-total-content c-primary">{{editInfo.totalIssued}}</div>
                                    <div class="user-total-title">发放数量</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content c-danger">{{editInfo.totalUsed}}</div>
                                    <div class="user-total-title">已使用</div>
                                </div>
                                <div class="user-total-list">
                                    <div class="user-total-content c-warning">{{editInfo.totalUnused}}</div>
                                    <div class="user-total-title">未使用</div>
                                </div>
                            </div>
                            <a-table bordered :rowKey="(item,i)=>item.id" :columns="columnsUser"
                                :data-source="editInfo.userDetails" :pagination="false">
                                <template slot='action' slot-scope="text, record, index">
                                    <div>
                                        <a-button type="danger" @click="clickDelete(record,index)">删除</a-button>
                                    </div>
                                </template>
                                <template slot='getRow' slot-scope="text, record, index">
                                    <div>
                                        <span>{{record.usageLimit}}</span>
                                    </div>
                                </template>
                            </a-table>
                        </div>

                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal">
                    关闭
                </a-button>
            </template>
        </a-modal>

        <GeneralDetailVue :visible="generalDetailVisible" @closeModal="() => generalDetailVisible = false" :editInfo="detailInfo"
            :isShow="true" :isAudit="false" />
        <ShopMallDetailVue :visible="shopMallDetailVisible" @closeModal="() => shopMallDetailVisible = false"
            :editInfo="detailInfo" :isShow="true" :isAudit="false" />
        <a-modal width="1000px" title="机构明细" :visible="storeLogVisible" @ok="()=>storeLogVisible=false"
            @cancel="()=>storeLogVisible=false" okText="确定" cancelText="取消">
            <a-table bordered :rowKey="(item,i)=>item.id" :columns="columnsUser" :data-source="storeLogList" :pagination="false">

            </a-table>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import { h } from "vue";
import marketApi from "@/api/marketApi";
import ShopMallDetailVue from "@/views/market/platCoupon/shopMallDetail.vue";
import GeneralDetailVue from "@/views/market/platCoupon/generalDetail.vue";
import { format, toYuan } from "@/utils";
@Component({
    name: "tpl",
    components: { ShopMallDetailVue, GeneralDetailVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) editInfo!: any;
    @Prop({ default: "" }) couponType!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
        } else {
        }
    }
    statusList = [
        { id: 0, name: "待提交", class: "" },
        { id: 1, name: "待确认", class: "c-primary" },
        { id: 2, name: "待审核", class: "c-warning" },
        { id: 3, name: "待发布", class: "c-primary" },
        { id: 4, name: "已发布", class: "c-success" },
        { id: 5, name: "已下架", class: "c-danger" },
        { id: 6, name: "已中止", class: "c-danger" },
        { id: 7, name: "已驳回", class: "c-danger" },
    ];
    getStatusType = (status) => {
        const find = this.statusList.find((item) => {
            return item.id === status;
        });
        if (find) {
            return find;
        }
        return { name: "", class: "" };
    };
    detailLoading = false;
    async mounted() {}
    columnsUser = [
        {
            align: "center",
            dataIndex: "userName",
            key: "userName",
            title: "用户名称",
        },
        {
            align: "center",
            dataIndex: "storeName",
            key: "storeName",
            title: "核销医馆",
        },
        {
            align: "center",
            dataIndex: "userPhone",
            key: "userPhone",
            title: "用户账号",
        },
        {
            align: "center",
            dataIndex: "useTime",
            key: "useTime",
            title: "使用时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.useTime);
            },
        },
    ];
    columnsAgency = [
        {
            align: "center",
            dataIndex: "storeName",
            key: "storeName",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "institutionalType",
            key: "institutionalType",
            title: "机构类型",
        },
        {
            align: "center",
            dataIndex: "storeType",
            key: "storeType",
            title: "自营/加盟",
            customRender: (text: string, record: any, index: number) => {
                return record.storeType === "ZY" ? "自营" : "加盟";
            },
        },
        {
            align: "center",
            dataIndex: "receivedQuantity",
            key: "receivedQuantity",
            title: "发放数量",
        },
        {
            align: "center",
            dataIndex: "usedQuantity",
            key: "usedQuantity",
            title: "核销数量",
        },
        {
            align: "center",
            dataIndex: "totalDiscountAmount",
            key: "totalDiscountAmount",
            title: "累计满减金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.totalDiscountAmount);
            },
        },
        {
            align: "center",
            dataIndex: "receivedQuantity1",
            key: "receivedQuantity1",
            title: "加盟营销费",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 230,
            scopedSlots: { customRender: "action" },
        },
    ];
    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        this.$emit("modalOk");
    }
    generalDetailVisible = false;
    shopMallDetailVisible = false;
    detailInfo = {};
    async jumpCoupon() {
        this.detailLoading = true;
        try {
            const res = await marketApi.findCouponDetail(this.editInfo.id);
            this.detailInfo = res.data;
            if (1) {
                this.generalDetailVisible = true;
            } else {
                this.shopMallDetailVisible = true;
            }
        } finally {
            this.detailLoading = false;
        }
    }
    storeLogVisible = false;
    storeLogList = [];
    clickStoreList() {
        this.storeLogVisible = true;
    }
    clickStoreExport() {}
}
</script>
<style lang="scss">
.reconciliation-detail-modal {
    .form-panel-box {
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .user-total {
        margin-bottom: 10px;
    }
    .user-total-list {
        width: 140px;
        display: inline-block;
        text-align: center;
        background-color: #eef7fe;
        margin-right: 10px;
        border-radius: 4px;
        padding: 10px 0;
    }
    .user-total-content {
        font-weight: 500;
        font-size: 22px;
        color: #222222;
    }
    .user-total-title {
        font-size: 12px;
        color: #6d6d6d;
    }
}
</style>
